<script setup>
import {ref, onMounted} from "vue";
import {readInventory, passInventory, rejectInventory} from "@/apis/inventory";
import {useRoute, useRouter} from "vue-router";
import {Message} from "tdesign-mobile-vue";
import defaultImg from "@/assets/material.png";

const route = useRoute();
const router = useRouter();
const recordInfo = ref({
  user: {profile: {}},
  record_user: {profile: {}},
});
const visible = ref(false);
const isShowReject = ref(false);

const confirmBtn = {
  content: '确认',
  variant: 'text',
  size: 'large',
};
const cancelBtn = {
  content: '取消',
  variant: 'text',
  size: 'large',
};
const reason = ref("")

onMounted(() => {
  readInventory(route.params.id)
      .then(res => {
        const {code, msg, data} = res.data;
        if (code === 1) {
          recordInfo.value = data;
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
          setTimeout(() => {
            router.back();
          }, 2000);
        }
      })
})

function pass() {
  passInventory(route.params.id)
      .then(res => {
        const {code, msg} = res.data;
        if (code === 1) {
          Message.success({
            content: "审核成功",
            context: document.querySelector('main'),
            offset: [8, 8],
          });
          setTimeout(() => {
            router.back();
          }, 2000);
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
          setTimeout(() => {
            router.back();
          }, 2000);
        }
      })
}

function reject() {
  if (reason.value === "") {
    Message.error({
      content: "拒绝理由不能为空",
      context: document.querySelector('main'),
      offset: [8, 8],
    });
    return;
  }
  rejectInventory(route.params.id, reason.value)
      .then(res => {
        const {code, msg} = res.data;
        if (code === 1) {
          Message.success({
            content: "审核成功",
            context: document.querySelector('main'),
            offset: [8, 8],
          });
          setTimeout(() => {
            router.back();
          }, 2000);
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
          setTimeout(() => {
            router.back();
          }, 2000);
        }
      })
}
</script>

<template>
  <main>
    <t-cell-group title="详情单">
      <t-cell title="标题" :note="recordInfo.title"/>
      <t-cell title="记录日期" :note="recordInfo.create_time"/>
      <t-cell title="记录类型" :note="recordInfo.type_text"/>
      <t-cell title="记录状态" :note="recordInfo.status_text"/>
      <t-cell title="记录人" :note="recordInfo.record_user.profile.name"/>
    </t-cell-group>

    <t-cell-group title="物品列表">
      <t-cell v-for="item in recordInfo.goods_list" :key="item.id" :title="item.name"
              :image="item.cover_info.url || defaultImg">
        <template #description>
          <t-tag style="margin-right: 8px;">物品编码：{{ item.material_id }}</t-tag>
          <t-tag theme="primary">物品数量：{{ item.total }}</t-tag>
        </template>
      </t-cell>
    </t-cell-group>

    <t-cell-group title="凭证">
      <t-cell v-if="recordInfo.voucher">暂无数据</t-cell>
    </t-cell-group>

    <t-cell-group title="操作">
      <div class="action">
        <t-button block theme="primary" @click="pass">通过</t-button>
        <t-button block theme="danger" @click="isShowReject = true">拒绝</t-button>
        <t-dialog
            v-model:visible="isShowReject"
            close-on-overlay-click
            title="拒绝理由"
            :cancel-btn="cancelBtn"
            :confirm-btn="confirmBtn"
            @confirm="reject"
            @cancel="isShowReject=false"
        >
          <t-input placeholder="请输入拒绝理由" v-model="reason"/>
        </t-dialog>
      </div>
    </t-cell-group>

    <t-image-viewer closeBtn="true" showIndex="true" initialIndex="initIndex" :visible="visible"
                    :images="images"></t-image-viewer>
  </main>
</template>

<style scoped lang="less">
.action {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background-color: #fff;
}
</style>